<template>
    <view class="mul-select">
        <u-cell-item :value="showLabel || placeholder" :arrow="true" @click="show = true"></u-cell-item>
        <u-popup v-model="show" mode="bottom" mask-close-able closeable>
            <view class="popup-box-content">
                <view class="popup-title"></view>
                <view class="popup-content">
                    <view class="mul-select-options">
                        <view class="mul-select-option-item"
                            v-for="(item, index) in showOptions"
                            :key="index"
                            :class="values.includes(+item.value) ? 'active' : ''"
                            @click="handlerChoose(item)">
                            {{item.label}}
                        </view>
                    </view>
                </view>
                <view class="popup-footer">
                    <u-button @click="show = false" style="margin-right: 24rpx">取消</u-button>
                    <u-button type="primary" @click="confirm">确定</u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script lang="ts" setup>
import { ref,defineProps, defineEmits, computed, watchEffect } from 'vue'
const props = defineProps({
    data: {
        type: [Array, String]
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    defaultProps: {
        type: Object,
        default: () => ({
            label: 'label',
            value: 'value'
        })
    },
    options: {
        type: Array,
        default: () => []
    }
})
const values:any = ref([])
watchEffect(() => {
    let arr:any[] = []
    if (typeof props.data === 'string') {
        // 类型转换
        arr = props.data.split(',').map(item => +item)
    } else {
        arr = props.data || []
    }
    values.value = arr
})
const emit = defineEmits(['update:data'])
const show = ref(false)
const showLabel = computed(() => {
    let arr = []
    arr = values.value.map((val) => {
        let obj = props.options.find((item:any) => item[props.defaultProps.value] == val) || {}
        return obj[props.defaultProps.label]
    })
    return arr.join(',')
})
const showOptions = computed(() => {
    return props.options.map((item:any) => ({
        ...item,
        label: item[props.defaultProps.label],
        value: item[props.defaultProps.value]
    }))
})
const defaultValue = computed(() => {
    return [showOptions.value.findIndex(item => item.value === props.data)]
})
const handlerChoose = (data:any) => {
    console.log(data)
    if (values.value.includes(data.value)) {
        let index = values.value.findIndex(item => item == data.value)
        values.value.splice(index, 1)
    } else {
        values.value.push(+data.value)
    }
}
const confirm = () => {
    emit('update:data', values.value.join(','))
    show.value = false
}
</script>

<style lang="scss">
.mul-select{
    .mul-select-options{
        margin: 48rpx 0; 
        display: flex;
        flex-wrap: wrap;
        .mul-select-option-item{
            padding: 0rpx 24rpx;
            border-radius: 12rpx;
            background: #e0e0e0;
            margin-right: 12rpx;
            margin-bottom: 24rpx;
            &.active{
                background: #218de2;
                color: #fff;
            }
        }
    }
}
</style>